<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            display: flex;
            justify-content: center;
        }

        .outer {
            height: auto;
            width: auto;
        }

        .addbook {
            width: 700px;
            height: 90px;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
        }

        .addbook h2 {
            margin-left: 10px;
        }

        .addbook input {
            margin-left: 10px;
            margin-right: 10px;
        }

        .search {
            margin-top: 20px;
            width: 400px;
            margin-bottom: 20px;
        }

        .bookList {
            width: 700px;
            height: auto;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(0, 0, 0, 0.3);
            align-items: center;
        }

        .addbooks {
            width: 670px;
            height: 160px;
            margin-top: 5px;
            margin-bottom: 5px;
            border: 1px solid rgba(0, 0, 0, 0.3);
            border-radius: 10px;
        }

        .addbooks p{
            margin-left: 10px;
        }
        
        .bookList button{
            margin-left: 10px;
        }
        
        .model{
            display: none;
            position: fixed;
            z-index: 10;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        
        .model-cont{
            background-color: rgba(220, 220, 220, 0.7);
            width: 80%;
            max-width: 300px;
            margin: 15% auto;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="addbook">
            <h2>添加图书</h2>
            <input type="text" placeholder="图书名称" class="bookName">
            <input type="text" placeholder="作者" class="bookAutor">
            <input type="text" placeholder="出版年份" class="bookYear">
            <button class="addbtn">添加</button>
        </div>
        <input type="text" class="search" placeholder="请输入图书名称或作者">
        <div class="bookList">
        </div>
        <div class="model">
            <div class="model-cont">
                <h2>修改图书信息</h2>
                <p>书名：<input type="text" placeholder="图书名称" class="modelname"></p>
                <p>作者：<input type="text" placeholder="作者" class="modelauthor"></p>
                <p>出版年份：<input type="text" placeholder="出版年份" class="modelyear"></p>
                <button class="savebtn">保存</button>
                <button class="closebtn">取消</button>
            </div>
        </div>
    </div>
    <script>
        let inputs = document.querySelectorAll('input');
        let addbtn = document.querySelector('.addbtn');
        let list =document.querySelector('.bookList');
        let savebtn=document.querySelector('.savebtn');
        let closebtn=document.querySelector('.closebtn');
        let model =document.querySelector('.model');
        addbtn.addEventListener('click', function () {
            if (inputs[0].value == '')
                alert('书名不能为空');
            else if (inputs[1].value == '')
                alert('作者不能为空');
            else if (inputs[2].value == '')
                alert('出版年份不能为空');
            else {
                let book =document.createElement('div');
                book.classList.add('addbooks');

                let name =document.createElement('p');
                name.textContent=`书名：${inputs[0].value}`
                book.appendChild(name);

                let author =document.createElement('p');
                author.textContent=`作者：${inputs[1].value}`
                book.appendChild(author);

                let year =document.createElement('p');
                year.textContent=`出版年份：${inputs[2].value}`
                book.appendChild(year);

                let create =document.createElement('button')
                create.textContent='修改'
                create.classList.add('createbox');
                create.addEventListener('click',function(){
                    model.style.display='block';
                    let modelname =document.querySelector('.modelname');
                    let modelauthor =document.querySelector('.modelauthor');
                    let modelyear =document.querySelector('.modelyear');
                    modelname.value=name.textContent.replace('书名：','');
                    modelauthor.value=author.textContent.replace('作者：','');
                    modelyear.value =year.textContent.replace('出版年份：','');
                })
                book.appendChild(create);

                let del =document.createElement('button');
                del.textContent='删除'
                book.appendChild(del)
                del.addEventListener('click',function(){
                    list.removeChild(book)
                });
                del.classList.add('delbox');
                list.appendChild(book)
            }
        });
        savebtn.addEventListener('click',function(){
            
        });
    </script>
</body>

</html>